<template>
    <div class="history-wrapper">
        <Block>
            <Title :detailData="detailData"></Title>
        </Block>
        <Block>
            <DataGrid :auto-load="autoLoad" row-key="id" border ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item style="width: 320px">
                                <el-date-picker
                                    v-model="beginTime"
                                    type="daterange"
                                    unlink-panels
                                    range-separator="-"
                                    start-placeholder="执行开始时间起"
                                    end-placeholder="执行开始时间止"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    :default-time="defaultTime"
                                    @change="changeDataPicker"
                                    :editable="false"
                                    :clearable="false"
                                />
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="queryData.jobState" placeholder="执行情况" clearable>
                                    <el-option
                                        v-for="(value, key) in JobState"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column prop="jobName" label="任务" fixed show-overflow-tooltip />
                <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip />
                <el-table-column prop="beginTime" label="执行开始时间" show-overflow-tooltip />
                <el-table-column prop="endTime" label="执行完成时间" show-overflow-tooltip />
                <el-table-column label="执行情况">
                    <template #default="scope">
                        <span class="table-item-status" :status="JobState[scope.row.jobState]">
                            {{ JobState[scope.row.jobState] }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="75" fixed="right">
                    <template #default="scope">
                        <el-button
                            link
                            type="primary"
                            @click="onErrorInfo(scope.row)"
                            v-if="scope.row.jobState == 'FAILED'"
                        >
                            错误信息
                        </el-button>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import Title from './components/Title.vue';
import { showPopupBox } from '@great/utils';
import { runTaskService } from '@great/services';
import { useRoute } from 'vue-router';
import { JobState } from '@/utils/constant';
import { DataGrid, Block, type DataGridInstance } from '@great/components';
import ErrorInfoModal from './components/ErrorInfoModal.vue';

const route = useRoute();
const detailData = ref();
const defaultTime = ref<[Date, Date]>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
// 查询条件
const queryData = ref({
    jobState: '',
    beginTimeLeft: '',
    beginTimeRight: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const beginTime = ref([
    `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 00:00:00`,
    `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 23:59:59`
]);
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await runTaskService.getDetail(route.params.id as string, route.params.no as string, {
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});

// 根据id获取任务日志行数据
const getTaskRowData = async () => {
    const res = await runTaskService.getTaskRowData(route.params.id as string);
    detailData.value = res.data;
};

const onErrorInfo = rowData => {
    showPopupBox(ErrorInfoModal, {
        callBack: dataGridRef.value?.refresh as () => Promise<void>,
        rowData
    });
};
const changeDataPicker = () => {
    if (beginTime.value && beginTime.value.length) {
        queryData.value.beginTimeLeft = beginTime.value[0];
        queryData.value.beginTimeRight = beginTime.value[1];
    } else {
        queryData.value.beginTimeLeft = '';
        queryData.value.beginTimeRight = '';
    }
};
const init = () => {
    getTaskRowData();
    queryData.value.beginTimeLeft = `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 00:00:00`;
    queryData.value.beginTimeRight = `${new Date()
        .toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit'
        })
        .replace(/\//g, '-')} 23:59:59`;
};
init();
</script>
<style scoped lang="scss">
.history-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-tag {
            display: flex;
        }
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='成功'] {
            &::before {
                background-color: #67c23a;
            }
        }
        .table-item-status[status='失败'] {
            &::before {
                background-color: #f56c6c;
            }
        }
        .table-item-status[status='超时'] {
            &::before {
                background-color: #e6a23c;
            }
        }
    }
}
</style>
